<template>
	<view class="radio" :class="{'radio-width-default':widthDefault}" :style="checked?activeStyle :itemStyle"
		@click="handleChange">
		{{name}}
	</view>
</template>

<script>
	import debounce from 'lodash/debounce'
	export default {
		props: {
			name: {
				type: String,
				default: ''
			},
			value: {
				default: null,
			},
			checked: {
				type: [Boolean, Number],
				default: false
			},
		},
		computed: {
			widthDefault() {
				return this.name.length <= 3
			},
			activeStyle() {
				return `background: #FF6000;color: #fff;border:none;`
			},
			itemStyle() {
				return `box-shadow: 0 0 10rpx #ccc;border:none;`
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handleChange: debounce(handleChange, 200, {
				leading: true,
				trailing: false
			})
		}
	}

	function handleChange() {
		this.$emit('change', this.value)
	}
</script>

<style>
	.radio {
		display: inline-block;
		height: 60upx;
		line-height: 60upx;
		padding: 0 22upx;
		border-radius: 10upx;
		/* margin: 0 20rpx; */
		font-size: 26upx;
		box-sizing: border-box;
		border: 1px solid #c3c3c3;
	}

	.radio-width-default {
		width: 120upx;
		text-align: center;
		padding: 0;
	}
</style>